<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@include file="/common/head.jsp" %>
<style>
    .form-group label.control-label {
        font-weight: normal;
        text-align: left;
    }

    .form-horizontal .form-group {
        margin-left: 20px;
    }

    .form-group .form-control.inline {
        display: inline-block;
        width: 80%;
    }

    h3 {
        margin: 20px 0;
    }

    #temp {
        display: none;
    }

    .err {
        display: none;
    }
    #add {
        display: none;
    }
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form action="${ctx}/admin/agent/agentCustomerRenew/save">
    <input type="hidden" name="id" value="${n.id}"/>
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-4 control-label">机构名称：${n.orgName}</label>
            <label class="col-sm-4 control-label">医生名称：${n.name}</label>
            <label class="col-sm-3 control-label">登录账号：${n.mobile}</label>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">
                到期时间：
                <c:choose>
                    <c:when test="${n.expireDate == null }">
                        <fmt:formatDate value="${n.created}" pattern="yyyy-MM-dd"/>
                    </c:when>
                    <c:otherwise>
                        <fmt:formatDate value="${n.expireDate}" pattern="yyyy-MM-dd"/>
                    </c:otherwise>
                </c:choose>
            </label>
            <label class="col-sm-4 control-label">
                剩余时间：
                <c:choose>
                    <c:when test="${n.expireDate == null }">
                        <span class="text-danger">未激活</span>
                    </c:when>
                    <c:otherwise>
                        <span class="text-danger">${n.restDays}天</span>
                    </c:otherwise>
                </c:choose>
            </label>
        </div>

        <div id="services">
            <%--<c:forEach items="${customerServicePackageList}" var="csp">--%>
            <%--<div class="form-group">--%>
                <%--<label class="col-sm-2 control-label">服务类型</label>--%>
                <%--<div class="col-sm-3">--%>
                    <%--<select type="text" class="form-control" name="servicePackageId">--%>
                        <%--<c:forEach items="${existedServicePackageList}" var="esp">--%>
                        <%--<option value="${esp.id}" data-count="${esp.remainCount}" <c:if test="${esp.id == csp.servicePackage.id}">selected</c:if>>${esp.name}(${esp.expireDays}天)</option>--%>
                        <%--</c:forEach>--%>
                    <%--</select>--%>
                <%--</div>--%>
                <%--<label class="col-sm-2 control-label">使用个数</label>--%>
                <%--<div class="col-sm-2">--%>
                    <%--<input type="text" class="form-control inline" name="servicePackageCount" value="${csp.count}">--%>
                    <%--个--%>
                <%--</div>--%>
                <%--<label class="col-sm-2 control-label text-danger text-left">--%>
                    <%--剩余： <span class="residual">${csp.remainCount}</span>--%>
                <%--</label>--%>
                <%--<label class="col-sm-1 control-label">--%>
                    <%--<a href="javascript: void(0);" onclick="delServ(this)">删除</a>--%>
                <%--</label>--%>
            <%--</div>--%>
            <%--</c:forEach>--%>
        </div>
        <div class="form-group">
            <div class="col-sm-4">
                <label class="err text-danger">格式错误，个数必须是大于0的整数</label>
            </div>
        </div>
        <c:if test="${existedServicePackageList.size() ne 0}">
            <div class="form-group">
                <label class="col-sm-2 control-label">账号类型</label>
                <div class="col-sm-3">
                    <select type="text" class="form-control" name="servicePackageId">
                        <c:forEach items="${existedServicePackageList}" var="esp">
                            <c:choose>
                                <c:when test="${customerType eq 2}">
                                    <c:if test="${esp.type ne 1}">
                                        <option value="${esp.id}" data-count="${esp.remainCount}">${esp.name}(${esp.expireDays}天)</option>
                                    </c:if>
                                </c:when>
                                <c:otherwise>
                                    <option value="${esp.id}" data-count="${esp.remainCount}">${esp.name}(${esp.expireDays}天)</option>
                                </c:otherwise>
                            </c:choose>


                        </c:forEach>
                    </select>
                </div>
                <label class="col-sm-2 control-label">使用个数</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control inline servicePackageCount" value="1" name="servicePackageCount" readonly>
                    个
                </div>
                <label class="col-sm-2 control-label text-danger text-left">
                    剩余： <span class="residual">${existedServicePackageList[0].remainCount}</span>
                </label>
                <%--<label class="col-sm-1 control-label">
                    <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
                </label>--%>
            </div>
        </c:if>
        <c:if test="${existedServicePackageList.size() eq 0}">
            <div class="form-group">
                <label class="col-sm-1 control-label">&nbsp;</label>
                <label class="col-sm-4 control-label text-danger">
                    正式服务包数量已用完，请联系客服购买。
                </label>
            </div>
        </c:if>
    </div>
    </form>
</div>
<%--新增服务模板--%>
<div id="temp">
    <div class="form-group">
        <label class="col-sm-2 control-label">账号类型</label>
        <div class="col-sm-3">
            <select type="text" class="form-control" name="servicePackageId">
                <c:forEach items="${existedServicePackageList}" var="esp">
                    <option value="${esp.id}" data-count="${esp.remainCount}">${esp.name}(${esp.expireDays}天)</option>
                </c:forEach>
            </select>
        </div>
        <label class="col-sm-2 control-label">使用个数</label>
        <div class="col-sm-2">
            <input type="text" class="form-control inline servicePackageCount" value="1" name="servicePackageCount" required>
            个
        </div>
        <label class="col-sm-2 control-label text-danger text-left">
            剩余： <span class="residual">${existedServicePackageList[0].remainCount}</span>
        </label>
        <label class="col-sm-1 control-label">
            <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
        </label>
    </div>
</div>

<div id="add">
    <div class="form-group">
        <label class="col-sm-7 control-label">
            <button type="button" class="btn btn-sm btn-primary" onclick="addServ(this)">新增</button>
            <%-- <label class="err text-danger">格式错误，个数必须是大于0的整数</label>--%>
        </label>
    </div>
</div>

<%@include file="/common/foot.jsp" %>
<script>
    function validateInput() {
        var flag = true;
        var count = true;

        $("#services .servicePackageCount").each(function () {
            if ($(this).val() <= 0) {
                flag = false;
                count = false;
            }
        });

        if (!count) {
            $(".err").show();
        } else {
            $(".err").hide();
        }

        return flag;
    }

    function addServ(ele) {
        $("#services").append($("#temp").html());
        $(ele).closest(".form-group").remove();
    }

    function delServ(ele) {
        $(ele).closest(".form-group").remove();
        $("#services").append($("#add").html());
        $(".err").hide();
    }

    // 限制账号类型数量输入为整数并判断
    $(document).on("input", ".servicePackageCount", function () {
        $(this).val($(this).val().replace(/\D/g, ""));
        if ($(this).val() > 0) {
            $(".err").hide();
        } else {
            $(".err").show();
        }
    });

    $(document).on("change", "select[name=servicePackageId]", function () {
        var p = $(this).closest(".form-group");
        var c = $(this).find('option:selected').data("count");
        p.find(".residual").html(c);
    });
</script>
</body>
</html>
